<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>查看及编辑政策原因</title>
        <script src="/lib/axios.js"></script>
        <script src="/lib/vue.js"></script>
        <link rel="stylesheet" href="/lib/elementindex.css">
        <script src="/lib/elementindex.js"></script>
    </head>

    <body>
        <div id="app" style="width:100%">
            <el-tabs value='config'>
                <el-tab-pane label="基本信息" name="rbasic">
                    <hc-rule-basic :ruledef='ruleDef'></hc-rule-basic>
                </el-tab-pane>
                <el-tab-pane label="规则配置" name="config">
                    <el-form ref="form" label-width="auto">
                        <el-table :data="ruleDef.list" style="width: 100%;margin-bottom: 20px;" row-key="id" border
                            :default-sort="{prop: 'code', order: 'ascending'}">
                            <el-table-column label="#" prop='id' min-width="12px">
                            </el-table-column>

                            <el-table-column label="原因码" sortable prop="code">
                                <template slot-scope="scope">
                                    <el-input v-model="scope.row.code" placeholder="5位的字母开头的唯一编码" onkeyup="value=$util.tokentrim(value)"
                                        onbeforepaste="clipboardData.setData('text',$util.tokentrim(clipboardData.getData('text')))"></el-input>
                                </template>
                            </el-table-column>

                            <el-table-column label="名称/说明">
                                <template slot-scope="scope">
                                    <el-input v-model.trim="scope.row.name" type="textarea" :autosize="{ minRows: 1, maxRows: 4}"
                                        placeholder="原因的描述信息"></el-input>
                                </template>
                            </el-table-column>

                            <!-- <el-table-column label="使用场景">
                                <template slot-scope="scope">
                                    <el-select v-model="scope.row.type" placeholder="请选择">
                                        <el-option v-for="item in ruleTypeOptions" :key="item.value" :label="item.label"
                                            :value="item.value">
                                        </el-option>
                                    </el-select>
                                </template>
                            </el-table-column> -->

                            <el-table-column type="expand" label="脚本" width='60px'>
                                <template slot-scope="scope">
                                    <hc-groovy-editor v-if="scope.row.type == 'script'" :panel='false' v-model="scope.row.script"
                                        :minlines='12' :maxlines='40'></hc-groovy-editor>
                                    <span v-else>只有政策规则需要提交检查脚本</span>
                                </template>
                            </el-table-column>


                            <el-table-column label="操作" min-width="100px">
                                <template slot-scope="scope">
                                    <!--                         <el-tooltip content="上增一行" placement="top-start">
                                        <el-button size="mini" @click="triggerInsertRowEvent(scope.$index)" placeholder="">干
                                        </el-button>
                                    </el-tooltip>
                                    <el-tooltip content="下增一行" placement="top-start">
                                        <el-button size="mini" @click="triggerInsertRowEvent(scope.$index+1)">士</el-button>
                                    </el-tooltip> -->
                                    <el-tooltip content="删除当前行" placement="top-start">
                                        <el-button size="mini" plain @click="triggerDeleteRowEvent(scope.$index)">X</el-button>
                                    </el-tooltip>
                                </template>
                            </el-table-column>
                        </el-table>

                        <el-form-item label="">
                            <el-button type="success" size='mini' @click='triggerAppendRowEvent'>添加原因码</el-button>
                        </el-form-item>

                        <el-form-item label="">
                            <el-button type="primary" @click='triggerSaveEvent'>保存修改</el-button>
                        </el-form-item>
                    </el-form>
                </el-tab-pane>

                <el-tab-pane label="规则测试" name="test">
                    <hc-test :rpath="ruleDef.rpath" :inputs='ruleDef.rtest' @save-inputs="ruleDef.rtest = $event"></hc-test>
                </el-tab-pane>
            </el-tabs>
        </div>

        <script src="/lib/ace-noconflict/ace.js"></script>
        <script src="/lib/ace-noconflict/ext-language_tools.js"></script>
        <link rel="stylesheet" href="/com/hc-groovy-editor.css" />
        <link rel="stylesheet" href="/com/hc-lang-editor.css" />
        <script type='module'>
            import * as $util from '/lib/hc-util.js'
            window.$util = $util; //for html document event
            import * as $rest from '/lib/hc-rest-service.js'
            import {} from '/com/hc-test.js'
            import {} from '/com/hc-rule-basic-properties.js'
            import {} from '/com/hc-groovy-editor.js'
            
            $rest.check$pinfoOrLoad(onready, 'xsxdjc/Main');

            function onready() {
                $rest.obtainRuleDefByRpath($pinfo.pcode() + '/PolicyReason', function(ruleDef) {
                    window.vm = new Vue({
                        el: '#app',
                        data: {
                            ruleTypeOptions: [{
                                    value: 'script',
                                    label: '政策规则'
                                },
                                {
                                    value: 'adverse',
                                    label: '负面原因'
                                },
                                {
                                    value: 'manual',
                                    label: '其它情景'
                                }
                            ],
                            ruleDef: ruleDef,
                        },
                        methods: {
                            triggerInsertRowEvent: onInsertRowEvent,
                            triggerDeleteRowEvent: onDeleteRowEvent,
                            triggerAppendRowEvent: onAppendRowEvent,
                            triggerSaveEvent() {
                                $rest.updateRuleDefInVm(this)
                            },
                        }
                    });
                });
            }

            function onAppendRowEvent() {
                onInsertRowEvent(vm.$data.ruleDef.list.length)
            }

            function onInsertRowEvent(index) {
                let maxid = ++vm.ruleDef.rmaxid;
                let row = {
                    id: maxid,
                    code: 'R' + ('0000' + maxid).substr(-4),
                    name: '',
                    type: 'script',
                    script: ""
                }
                vm.$data.ruleDef.list.splice(index, 0, row);
            }

            function onDeleteRowEvent(index) {
                vm.$data.ruleDef.list.splice(index, 1);
            }
        </script>
    </body>
</html>
